<template>
  <div class="recommend-main">
    <Title>爆款推荐</Title>
    <ul>
      <li v-for="rmd in recommendList" :key="rmd.id">
        <img :src="rmd.imgUrl" alt="" />
        <div class="recommend-txt">
          <span>{{ rmd.name }}</span>
          <span>{{ rmd.content }}</span>
          <span>￥{{ rmd.price }}</span>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "Recommend",
  props: {
    recommendList: Array,
  },
};
</script>

<style lang="scss" scoped>
.recommend-main {
  width: 100%;
  margin-top: 0.2667rem;

  ul {
    background-color: #fff;
  }

  li {
    position: relative;
  }

  img {
    width: 100%;
    margin-bottom: 0.08rem;
  }

  .recommend-txt {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.3733rem;
    right: 0.5333rem;
    top: 1.0667rem;
    span:nth-child(1) {
      font-size: 0.32rem;
      color: rgba(82, 80, 80, 0.895);
    }
    span:nth-child(3) {
      margin-top: 0.5333rem;
      color: rgb(165, 19, 19);
    }
  }
}
</style>